<template>
  <div class="app-container calendar-list-container">
    <!-- 查詢條件 -->
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('specialApplication.projectMeeting.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">

         <el-col :span="4">
           <div class="w20">
             <div class="labelName">{{$t('specialApplication.projectMeeting.isValue')+
             '('+$t('specialApplication.projectMeeting.actualDate')+')'}}</div> 
             <div style="display: flex">
               <dict-select v-model="listQuery.isActualDateQuery" code="practicalFinishDate" :clearable="true" @change="isActualDateChange"></dict-select>
             </div>
           </div>
         </el-col>
         <el-col :span="4">
           <div class="w20">
             <div class="labelName">{{$t('specialApplication.projectMeeting.actualDate')}}</div>
             <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                             v-model="listQuery.actualDateQuery" :disabled="dateDisabled1"
                             type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker>
           </div>
         </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.isValue')+
              '('+$t('specialApplication.projectMeeting.projectMeetingDate')+')'}}</div> <!--区间筛选-->
              <div style="display: flex">
                <dict-select v-model="listQuery.isProjectMeetingQuery" code="practicalFinishDate" :clearable="true" @change="isProjectMeetingChange"></dict-select>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.projectMeetingDate')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              v-model="listQuery.projectMeetingDateQuery" :disabled="dateDisabled2"
                              type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.isValue')+
              '('+$t('specialApplication.projectMeeting.closingMeeting')+')'}}</div> <!--区间筛选-->
              <div style="display: flex">
                <dict-select v-model="listQuery.isClosingMeetingQuery" code="practicalFinishDate" :clearable="true" @change="isClosingMeetingChange"></dict-select>
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.closingMeeting')}}</div>
              <el-date-picker style="width: 100%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              v-model="listQuery.closingMeetingQuery" :disabled="dateDisabled3"
                              type="daterange" range-separator="-" :start-placeholder="$t('placeholder.startDate')" :end-placeholder="$t('placeholder.endDate')"></el-date-picker>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.projectNo')}}</div>
              <!--请输入简称或全称-->
              <popover-select @setValue="selectProject" selectType="project" :placeholder="$t('placeholder.searchKeywords')" valueObjName="customerShortName" v-model="listQuery.projectNo"></popover-select>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bu" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('specialApplication.projectMeeting.clientName')}}</div>
              <!--请输入简称或全称-->
              <popover-select @setValue="selectCustomer" selectType="customer" :placeholder="$t('placeholder.enterShortOrAllName')" valueObjName="customerShortName" v-model="listQuery.clientName"></popover-select>
            </div>
          </el-col>

          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Year</div>
              <dict-select v-model="listQuery.year" code="year" :clearable="true"></dict-select>
            </div>
          </el-col>

          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="loading"
         :element-loading-text="$t('projectRevenue.dataReport.loading')"
         element-loading-spinner="el-icon-loading">
      <div class="yt-list-title">
        <span>{{$t('specialApplication.projectMeeting.demand')}}</span>
      </div>
      <div class="yt-list-content">
        <div class="list-operation">
          <div class="yt-btn yt-btn-ys" type="primary" @click="saveBut">{{$t('button.save')}}</div><!--保存-->
          <div class="yt-btn yt-ml8" type="primary" @click="exportExcel">{{$t('button.export')}}</div><!--汇出-->
          <div class="yt-btn yt-ml8" type="primary" @click="setUp">{{$t('button.sets')}}</div><!--栏位-->
        </div>
        <el-table :data="list" :empty-text="$t('placeholder.emptyText')"
                  v-if="displayBlockNameListFla === '1'"
                  border class="yt-table"
                  @selection-change="handleSelectionChange"
                  @cell-dblclick="dialogTable"
                  style="width: 100%" max-height="600" :cell-style="{padding:'5px 0px'}">

          <el-table-column align="center" label="Sum" width="60" fixed>
<!--            <el-table-column type="selection" align="center" class-name="pd" prop="id" width="60"/>-->
            <el-table-column type="index" align="center" :label=" $t('project.serialNumber')" class-name="pd" width="60"></el-table-column>
          </el-table-column>

          <el-table-column align="center" label="Category" prop="bg"
                           v-if="displayBlockNameStr['bg']" sortable
                           min-width="100" :show-overflow-tooltip="true" fixed/>

          <el-table-column align="center" label="Account" prop="bu"
                           v-if="displayBlockNameStr['bu']" sortable
                           min-width="100" :show-overflow-tooltip="true" fixed/>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.projectNo')" prop="projectCode"
                           v-if="displayBlockNameStr['projectCode']" sortable
                           min-width="150" :show-overflow-tooltip="true" fixed/>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.projectName')" prop="projectName"
                           v-if="displayBlockNameStr['projectName']" sortable
                           min-width="350" :show-overflow-tooltip="true" fixed/>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.customerName')" prop="customerName"
                           v-if="displayBlockNameStr['customerName']" sortable
                           min-width="200" :show-overflow-tooltip="true" />

          <el-table-column align="center" label="專案業務" prop="projectBusinessName"
          v-if="displayBlockNameStr['projectBusinessName']"
          min-width="100" :show-overflow-tooltip="true" />


         <el-table-column align="center" label="專案工程師" prop="projectEngineer"
                           v-if="displayBlockNameStr['projectEngineer']"
                           min-width="100" :show-overflow-tooltip="true" />

          <el-table-column align="center" label="Year" prop="projectYear"
                           v-if="displayBlockNameStr['projectYear']" sortable
                           min-width="150" :show-overflow-tooltip="true" />

          <el-table-column align="center" label="合約收入" prop="contractIncome"
                           v-if="displayBlockNameStr['contractIncome']" sortable
                           min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.contractIncome }}</div>
            </template>
          </el-table-column>

    
          <el-table-column align="center" label="PO核准日" prop="poApprovalDate"
                           v-if="displayBlockNameStr['poApprovalDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="施工前BP日" prop="beforeBpDate"
                           v-if="displayBlockNameStr['beforeBpDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="預計完工日" prop="expectedFinishDate"
                           v-if="displayBlockNameStr['expectedFinishDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="實際完工日" prop="realityFinishDate"
                           v-if="displayBlockNameStr['realityFinishDate']"
                           min-width="100" :show-overflow-tooltip="true"/>
     

         

          <el-table-column align="center" label="完工%" prop="estimatedCompletionPercentage"
                           v-if="displayBlockNameStr['estimatedCompletionPercentage']"
                           min-width="100" sortable/>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.projectMeetingScheduleThis')"
                           prop="projectMeetingScheduleThis" min-width="170"
                           v-if="displayBlockNameStr['projectMeetingScheduleThis']">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.projectMeetingScheduleThis" size="mini" align="center" style="width: 100%"
                              type="date" value-format="yyyy-MM-dd"
                              :placeholder="$t('specialApplication.projectMeeting.placeholder.paeaseDate')"> </el-date-picker>
            </template>
          </el-table-column>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.projectMeetingScheduleNext')" prop="projectMeetingScheduleNext"
                           v-if="displayBlockNameStr['projectMeetingScheduleNext']"
                           min-width="170">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.projectMeetingScheduleNext" size="mini" style="width: 100%"
                              type="date" value-format="yyyy-MM-dd"
                              :placeholder="$t('specialApplication.projectMeeting.placeholder.paeaseDate')"> </el-date-picker>
            </template>
          </el-table-column>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.closingMeeting')" prop="closingMeeting"
                           v-if="displayBlockNameStr['closingMeeting']"
                           min-width="170" >
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.closingMeeting" size="mini" style="width: 100%"
                              type="date" value-format="yyyy-MM-dd"
                              :placeholder="$t('specialApplication.projectMeeting.placeholder.paeaseDate')"> </el-date-picker>
            </template>
          </el-table-column>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.projectMeetingScheduleRemarks')" prop="projectMeetingScheduleRemarks"
                           v-if="displayBlockNameStr['projectMeetingScheduleRemarks']"
                           min-width="200" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <el-input v-model="scope.row.projectMeetingScheduleRemarks" resize="none"
                        :placeholder="$t('placeholder.content')"
                        style="-ms-overflow-y: hidden; -ms-overflow-x: hidden;"
                        type="textarea" :maxlength="50" autosize/>
            </template>
          </el-table-column>

          <el-table-column align="center" :label="$t('specialApplication.projectMeeting.closingMeetingRemarks')" prop="closingMeetingRemarks"
                           v-if="displayBlockNameStr['closingMeetingRemarks']"
                           min-width="200" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <el-input v-model="scope.row.closingMeetingRemarks" resize="none"
                        :placeholder="$t('placeholder.content')"
                        style="-ms-overflow-y: hidden; -ms-overflow-x: hidden"
                        type="textarea" :maxlength="50" autosize/>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container" style="padding: 0 20px 10px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page.sync="listQuery.page" :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>

      <!--设置的可见栏位-->
      <el-dialog :title="$t('projectRevenue.dataReport.setVisible')" :visible.sync="TableTitleVisible">
        <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
      </el-dialog>

      <el-dialog :visible.sync="statusDialogTable" width="50%" @close="dialogClose"
        title="工务进度追踪信息"
      >
        <el-table
          v-loading="dialogLoading"
          :element-loading-text="$t('projectRevenue.dataReport.loading')"
          element-loading-spinner="el-icon-loading" :data="dialogList"
          :empty-text="$t('placeholder.emptyText')" label-width="100px" class="yt-table">
          <el-table-column align="center" label="專案業務" prop="projectBusinessName"
                           v-if="displayBlockNameStr['projectBusinessName']"
                           min-width="100" :show-overflow-tooltip="true" />

          <el-table-column align="center" label="專案工程師" prop="projectEngineer"
                           v-if="displayBlockNameStr['projectEngineer']"
                           min-width="100" :show-overflow-tooltip="true" />

          <el-table-column align="center" label="PO核准日" prop="poApprovalDate"
                           v-if="displayBlockNameStr['poApprovalDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="施工前BP日" prop="beforeBpDate"
                           v-if="displayBlockNameStr['beforeBpDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="預計完工日" prop="expectedFinishDate"
                           v-if="displayBlockNameStr['expectedFinishDate']"
                           min-width="100" :show-overflow-tooltip="true"/>

          <el-table-column align="center" label="實際完工日" prop="realityFinishDate"
                           v-if="displayBlockNameStr['realityFinishDate']"
                           min-width="100" :show-overflow-tooltip="true"/>
        </el-table>

        <div class="pagination-container" style="padding: 0 20px 10px">
          <el-pagination :small="true" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" background :current-page.sync="dialogListQuery.page" :page-sizes="[5, 10, 15, 20]" :page-size="dialogListQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="dialogTotal"></el-pagination>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import { getDeptByBuAndCountry } from '@/api/bu/index';
  import { queryProjectMeetingList, saveProjectMeeting, queryProjectMeetingByProjectId } from '@/api/scheduleManager/progressList';
  import customerReq from '@/api/customer';
  import mixins from '@/mixins/yt-table-title';
  import YtTableTitle from '@/components/yt-table-title/index';
  import dictSelect from '@/components/Dict/dictValueSelect';
  import popoverSelect from '@/components/popover-select/index.vue';
  import { queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
  import { mapGetters } from 'vuex';

  export default {
    name: 'projectMeeting',
    mixins: [mixins],
    components: {
      dictSelect,
      YtTableTitle,
      popoverSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        blockNameCode: 'projectMeeting',
        statusDialogTable: false,
        dialogList: [],
        dialogLoading: false,
        dialogTotal: null,
        dialogQuery: {},
        list: [],
        dialogListQuery: {
          page: 1,
          limit: 5
        },
        listQuery: {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          year: '',
          projectNo: '',
          customerNo: '',
          country: '',
          caseEnd: '',
          closingMeetingQuery: [],
          projectMeetingDateQuery: [],
          actualDateQuery: [],
          isActualDateQuery: '',
          isProjectMeetingQuery: '',
          isClosingMeetingQuery: ''
        },
        buList: [],
        bgList: [],
        displayBlockNameStr: {},
        displayBlockNameListFla: {},
        optionsCustomer: [],
        dateDisabled1: true,
        dateDisabled2: true,
        dateDisabled3: true,
        total: null,
        subtotal: {},
        loading: false,
        selectionList: [],
        TableTitleVisible: false
      }
    },
    computed: {
      ...mapGetters(['elements'])
    },
    mounted() {
      this.getQuery();
      this.getBg();
      this.getColumn();
      this.getData();
    },
    methods: {
      dialogTable(row) {
        this.statusDialogTable = true;
        this.dialogLoading = true;
        const param = {}
        param.projectId = row.projectId
        param.page = this.dialogListQuery.page
        param.limit = this.dialogListQuery.limit
        this.dialogQuery = row
        queryProjectMeetingByProjectId(param).then(res => {
          if (res.status === 200) {
            this.dialogList = res.data.rows
            this.dialogTotal = res.data.total
            this.dialogLoading = false;
          }
        })
      },
      dialogClose() {
        this.dialogQuery = {}
        this.dialogList = []
        this.statusDialogTable = false;
      },
      exportExcel() {
        let str = ''; // 传参数
        for (const i in this.listQuery) {
          if (this.listQuery[i]) {
            str += i + '=' + this.listQuery[i] + '&';
          }
        }

        if (this.$store.getters.info && this.$store.getters.info.id) {
          str = str + 'createBy=' + this.$store.getters.info.id;
        }

        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProjectMeeting?' + str;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      saveBut() {
        this.$confirm('是否保存列表修改数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          saveProjectMeeting(this.list).then(res => {
            if (res.status === 200) {
              this.$message({
                type: 'success',
                message: '保存成功!'
              });
            } else {
              this.$message({
                type: 'warning',
                message: '保存失败!'
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      getQuery() {
        const meetingManagement = window.sessionStorage.getItem('meetingManagement');
        if (meetingManagement) {
          this.listQuery = JSON.parse(meetingManagement);
        }
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        window.sessionStorage.setItem(
          'meetingManagement',
          JSON.stringify(this.listQuery)
        );
        this.getData();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getData();
      },
      handleCurrentChange1(val) {
        this.dialogListQuery.page = val;
        this.dialogTable(this.dialogQuery);
      },
      handleSizeChange1(val) {
        this.dialogListQuery.limit = val;
        this.dialogTable(this.dialogQuery);
      },
      selectCustomer(item) {
        this.listQuery.client = item.id;
      },
      selectProject(item) {
        this.listQuery.projectNo = item.projectNo;
      },
      setUp() {
        // 设置
        this.TableTitleVisible = true
      },
      getData() {
        this.loading = true
        queryProjectMeetingList(this.listQuery).then(res => {
          this.list = res.data.rows
          this.total = res.data.total
          this.loading = false
        });
      },
      getColumn() {
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data)
      },
      getMixinColumn(data) {
        this.displayBlockNameStr = {}
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (res.data.length > 0) {
              this.displayBlockNameListFla = '1'
            } else {
              this.displayBlockNameListFla = '0'
            }
            this.displayBlockNameList = res.data
            for (const i in this.displayBlockNameList) {
              this.displayBlockNameStr[this.displayBlockNameList[i]] = true
            }
          }
        })
      },
      handleSelectionChange(val) {
        //  表格序号选中函数
        this.selectionList = val;
      },
      sortDate(column) {
        if (column.order === 'ascending') {
          this.listQuery.order = 'asc';
        } else if (column.order === 'descending') {
          this.listQuery.order = 'desc';
        }
        this.listQuery.orderBy = column.prop;
        this.getData()
      },
      cancel(val) {
        if (val) {
          this.getColumn();
        }
        this.TableTitleVisible = false
      },
      isActualDateChange(row) {
        if (row === '1') {
          this.dateDisabled1 = false;
        } else {
          this.dateDisabled1 = true;
        }
      },
      isProjectMeetingChange(row) {
        if (row === '1') {
          this.dateDisabled2 = false;
        } else {
          this.dateDisabled2 = true;
        }
      },
      isClosingMeetingChange(row) {
        if (row === '1') {
          this.dateDisabled3 = false;
        } else {
          this.dateDisabled3 = true;
        }
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          year: '',
          customerNo: '',
          country: '',
          caseEnd: '',
          projectNo: '',
          closingMeetingQuery: [],
          projectMeetingDateQuery: [],
          actualDateQuery: [],
          isActualDateQuery: '',
          isProjectMeetingQuery: '',
          isClosingMeetingQuery: ''
        };
        this.dateDisabled = true
        this.getData();
        this.isActualDateChange();
        this.isProjectMeetingChange();
        this.isClosingMeetingChange();
      },
      handleFilter() {
        this.getData();
      },
      queryCustomer(query) {
        this.loading = true;
        customerReq.pageClient({ clientName: query }).then(res => {
          this.loading = false;
          this.optionsCustomer = res.data.rows.map(item => ({ value: item.customerNo, label: item.customerShortName }));
        });
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = ''
        if (country) {
          const bgSet = []
          if (this.listQuery.bg !== '') {
            bgSet.push(this.listQuery.bg)
          }
          const param = {}
          param.country = country
          param.bg = bgSet
          param.bu = this.listQuery.bu
          getDeptByBuAndCountry(param).then(res => {
            this.bgList = res.data.bgList
            this.buList = res.data.buList
          })
        } else {
          this.getBg()
        }
      },
      getBg() {
        getDeptByBuAndCountry({}).then(res => {
          if (res) {
            this.buList = res.data.buList
            this.bgList = res.data.bgList
          }
        })
      },
      changeBg(row) {
        this.listQuery.bu = []
        const bgSet = []
        if (row !== '') {
          bgSet.push(row)
        }
        const param = {}
        param.country = this.listQuery.country
        param.bg = bgSet
        param.bu = []
        getDeptByBuAndCountry(param).then(res => {
          this.buList = res.data.buList
        })
      },
      changeBu(row) {
        if (row.length === 0) {
          this.listQuery.bu = []
        }
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('meetingManagement', JSON.stringify(this.listQuery))
    }
  }
</script>

<style scoped>
  .box{
    /* border: 1px solid #d9d9d9; */
    padding: 0 15px !important;
    height: 15px;
    line-height: 15px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    cursor:text;
    font-size: 12px;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 14px;
  }
</style>
